<template>
    <div class="film">
        <ul>
            <li v-for="item in soonList">
                <router-link :to="{name:'detail',params:{'id':item.id}}">
                    <div class="img"><img :src="item.poster.thumbnail" ></div>
                    <div class="introduction">
                        <div class="filmname">
                                <div class="title">{{item.name}}</div>
                                <div class="go">&gt;</div>
                        </div>
                        <p>{{item.intro}}</p> 
                        <div class="num">
                            <span class="date time">{{item.premiereAt | formatDate}}</span>
                            <span class="date">{{item.premiereAt | formatWeek}}</span>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default{
        data:function(){
            return{                
                soonList:[]
            }
        }, 
        filters: {
            'formatDate': function(val) {
                var time = new Date(val);
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return m + '月' + d + '日上映';
            },
            'formatWeek': function(val) {
                var time = new Date(val);
                var week = time.getDay();
                switch(week){
                    case 0: 
                        return '星期日';
                    case 1: 
                        return '星期一';
                    case 2: 
                        return '星期二';
                    case 3: 
                        return '星期三';
                    case 4: 
                        return '星期四';
                    case 5: 
                        return '星期五';
                    case 6: 
                        return '星期六';

                }
            }
        },       
        mounted:function(){
            var self=this;
            var num=1;
            // ajax请求得到正在热映影片
            function getData(){
                $.get('http://localhost:3000/soon?num='+num,function(res){
                    var list=res.data.films;
                    for(var i=0;i<list.length;i++){
                        self.soonList.push(list[i]);
                    }
                })	
            } 
            getData();
            $(window).scroll(function(){
                var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
                 //当文档的高度小于或者等于总的高度的时候，开始动态加载数据  
                if ($(document).height() <= totalheight){
                    num++;                    
                    getData();
                }
            })	
        }
    }
</script>

<style scoped>
    ul,li{
        list-style:none;
    }
    .film li>a{
        display:block;
        width: 100%;
        padding: 0.2rem 0;
        border-bottom: dashed 1px #c9c9c9;
        overflow: hidden;
    }
    .film li>a .img{
        width: 0.6rem;
        float: left;
    }
    .film li>a .img img{
        width:100%;
    }
    .film li>a .introduction{
        float:left;
        padding-left: 0.15rem;
        width: 75%;
    }
    .film li>a .introduction .filmname{
        font-size: 0.16rem;
        line-height: 0.32rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .introduction .filmname .title{
        float:left;
    }
    .introduction .filmname .go{
        float:right;
        font-family:cursive;
        font-size:0.14rem;
        color:#c6c6c6;
    }
    .introduction p{
        height: 0.24rem;
        line-height: 0.24rem;
        color: #8e8e8e;
        font-size: 0.12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }
    .introduction div.num{
        line-height: 0.24rem;
        color: #ffb375;
        font-size: 0.12rem;
    }
    .introduction div.num .date{
        margin-right:0.14rem;
    }
</style>